require(['./config'],() =>{
  require(['template','header','fly','zoom','footer'],(template,header) => {
     class Detail {
       constructor () {
         this.getData()
       }
       getData () {
        const id = location.search.slice(4)
        $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${ id }`,resp => {
          const { photo, title, price, originPrice} = resp.data.detail

          let arr = (resp.data.detail.descContentList).filter((item)=>{
            return item.image
          })

          $('#xiangqingIMG').html(template('detailData',{ photo, title, price, originPrice, arr , id}))
          this.fangdaZoom()
          this.shuliang(price,title,id,photo[0].url)
          // this.CartNumber()
        })
       }  
       fangdaZoom () {
        $(".zoom-image").elevateZoom({
          gallery:'gail'
      })
    }
    shuliang (price,title,id,imgUrl) {  
      const _this = this
      var num = 1
      $('.shuliangJia').on('click',function () {
        $('.shuliang input').val(num+=1)
        // _this.ToCart(num,title,imgUrl,price,id,)
      })
      $('.shuliangJian').on('click',function () {
        $('.shuliang input').val() <= 1 ? $('.shuliang input').val(1) :  $('.shuliang input').val(num-=1)
        // _this.ToCart(num,title,imgUrl,price,id,)
      })
      // this.shujuchucun(num,title,imgUrl,price,id)
      this.ToCart(num,title,imgUrl,price,id)
    }
    ToCart (num,title,imgUrl,price,id) {
      const _this = this
      $('.gouwuBtn').on('click',function () {
        _this.shujuchucun(num,title,imgUrl,price,id)
        var box = document.createElement('div'),
            boxgouwu = document.querySelector('.xiangqingRight')
         box.classList.add('warning')
         boxgouwu.appendChild(box)
         
        var offset = $('.gouwu').offset()
        $('.warning').fly({
          start:{
            left: 800,  //开始位置（必填）#fly元素会被设置成position: fixed
            top: 550,  //开始位置（必填）
          },
          end:{
            left:offset.left,
            top:offset.top-100
          },
          onEnd: function(){
            $(".warning").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果   
            $('.warning').remove()
            header.CartNumber()
            _this.getData()
          } //结束回调
        })
      })
      $('.lijigoumai').on('click',function () {
        _this.shujuchucun(num,title,imgUrl,price,id)
        location.href = '/html/shopping.html'
      })
    }
    shujuchucun (num,title,imgUrl,price,id,) {
            // let info = null
            if(localStorage.getItem("info")){
                this.info = JSON.parse(localStorage.getItem("info"))
                let flag = false
                this.info.forEach(function(item){
            
                    if(id===item.id){
                        item.num++
                        flag=true

                    }
                })
                if(flag) {

                }else {
                  const obj = {num,title,imgUrl,price,id,check:true}
                  this.info.push(obj)
                }
                
              }else {
                this.info = [{num,title,imgUrl,price,id,check:true}]
              }
              localStorage.setItem("info",JSON.stringify(this.info))
       }
     }
     return new Detail()
  })
})